<template>
	<div id="Works">
		<div class="title">
			工段信息
		</div>
		<div class="function">
			<el-row :gutter="10">
				<el-col :span="1">
					<el-button type="primary" @click="popUpShow.addPopup=true">新增</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="selectAll">查询全部</el-button>
				</el-col>
				<el-col :span="21">
					<div class="select">
						<div class="input">
							<el-row :gutter="10">
								<el-col :span="24">
									<el-form-item label="名称:" prop="name">
										<el-input v-model="data.name" @keyup.enter="selectAll" />
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="table">
			<el-row :gutter="10">
				<el-col :span="24">
					<el-table :data="data.gd" border style="width: 100%;height: 58vh;" v-loading="data.zt">
						<el-table-column prop="fCode" label="编号" />
						<el-table-column prop="fName" label="名称" width="120" />
						<el-table-column prop="fWorkTime" label="加工时间" />
						<el-table-column prop="fCreateUserId" label="录入人" />
						<el-table-column fixed="right" label="录入时间" width="120">
							<template #default="{ row }">
								{{row.fCreatorTime.substr(0,10)}}
							</template>
						</el-table-column>
						<el-table-column prop="fLastModifyUserId" label="最后修改人" />
						<el-table-column prop="fLastModifyTime" label="最后修改时间" />
						<el-table-column prop="fRemark" label="备注" />
						<el-table-column fixed="right" label="操作" width="120">
							<template #default="{ row }">
								<el-button link type="primary" size="small" @click="onHandleEdit(row)">编辑</el-button>

								<el-button link type="primary" size="small" @click="onHandleDel(row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
				<el-col :span="24">
					<!-- :current-page="pageData.queryParams.page" -->
					<el-pagination style="margin-top: 20px" layout="total, sizes, prev, pager, next, jumper"
						:page-size="pageInf.gd.pagesize" :total="pageInf.gd.sumPage" :current-page="pageInf.gd.page"
						@current-change="onHandleCurrentChange" @size-change="onHandleSizeChange">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
		<el-dialog v-model="popUpShow.aditPopup" title="工段信息详情">
			<el-form :model="aditForm" v-loading="data.aditTc">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="工段编号:" :label-width="formLabelWidth">
							<el-input v-model="aditForm.fCode" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态:" :label-width="formLabelWidth">
							<el-input disabled value="草稿" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工段名称:" :label-width="formLabelWidth">
							<el-input v-model="aditForm.fName" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="加工时间:" :label-width="formLabelWidth">
							<el-input v-model="aditForm.fWorkTime" type="number" min="0" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注:" :label-width="formLabelWidth">
							<el-input v-model="aditForm.fRemark" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="popUpShow.aditPopup = false">取消</el-button>
					<el-button type="primary" @click="adit">
						修改
					</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="popUpShow.addPopup" title="新增工段信息">
			<el-form :model="addForm" v-loading="data.addTc">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="工段编号:" :label-width="formLabelWidth">
							<el-input v-model="addForm.fCode" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态:" :label-width="formLabelWidth">
							<el-input disabled value="草稿"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工段名称:" :label-width="formLabelWidth">
							<el-input v-model="addForm.fName" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="加工时间:" :label-width="formLabelWidth">
							<el-input v-model="addForm.fWorkTime" type="number" min="0" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注:" :label-width="formLabelWidth">
							<el-input v-model="addForm.fRemark" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="popUpShow.addPopup = false">取消</el-button>
					<el-button type="primary" @click="add">
						新增
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import ajax from '../../../../public/JavaScript/api/ajax.js';
	import format from '../../../../public/JavaScript/until/fromatDate.js'
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	let popUpShow = reactive({
		aditPopup: false, //编辑弹窗是否显示
		addPopup: false //新增弹窗是否显示
	})
	const formLabelWidth = '140px' //编辑表单宽度
	let aditForm = reactive({ //编辑弹窗表单
		"fCode": "",
		"fCreateUserId": "",
		"fCreatorTime": "",
		"fId": "",
		"fLastModifyTime": "",
		"fLastModifyUserId": "",
		"fName": "",
		"fRemark": "",
		"fWorkTime": 0
	})
	let addForm = reactive({ //新增弹窗表单
		  "fCode": "",
		  "fName": "",
		  "fRemark": "",
		  "fWorkTime": 0
	})
	let pageInf = reactive({
		gd: {
			pagesize: 10,
			page: 1,
			sumPage:0
		}
	})
	let data = reactive({
		gd: [],
		zt:false,
		aditTc:false,
		addTc:false,
		name:''
	})	
	/* 当前页变换 */
	function onHandleCurrentChange(ev) {
		pageInf.gd.page = ev
		selectAll()
	}
	/* 当前显示数变换 */
	function onHandleSizeChange(ev) {
		pageInf.gd.pagesize = ev
		selectAll()
	}
	/* 编辑 */
	function onHandleEdit(ev) {
		// aditForm=ev
		sCOPY(aditForm,ev)
		popUpShow.aditPopup = true
	}
	function sCOPY(start,end){
		for(let i in end){
			start[i]=JSON.parse(JSON.stringify(end[i]))
		}
	}
	/* 删除 */
	function onHandleDel(ev) {
		ElMessageBox.confirm(
				'是否删除该条工段信息?',
				'删除提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'error',
				}
			)
			.then(() => {
				fetch(ajax.url+'/zn/wsc/del/'+ev.fId,{
					method: "POST",
					headers:{
						'Content-Type': 'application/x-www-form-urlencoded',
						'token':sessionStorage.getItem('token')
					}
				}).then(data=>{
					data.json().then(res=>{
						if(res.code==200){
							ElMessage({
								message: '删除成功！',
								type: 'success',
							})
							selectAll()
						}else{
							ElMessage.error(res.msg)
						}
					})
				})
			})
			.catch(() => {
				console.log(9)
			})
	}

	function adit() { //确认修改
		data.aditTc=true
		let ist=true
		for(let i in aditForm){
			if(aditForm[i].length==0 || aditForm[i]==null){
				ElMessage.error(i+"字段不能为空！")
				ist=false
				data.aditTc=false
				break;
			}
		}
		if(ist){
			ajax.post('/wsc/update',{
				body:aditForm
			},res=>{
				console.log(res)
				if(res.code==200){
					ElMessage({
						message: '修改成功！',
						type: 'success',
					})
					selectAll()
					data.aditTc=false
					popUpShow.aditPopup=false
				}else{
					ElMessage.error(res.msg)
					data.aditTc=false
					popUpShow.aditPopup=false
				}
			},err=>{
				ElMessage.error(res.msg)
				data.aditTc=false
				popUpShow.aditPopup=false
			})
		}
	}

	function add() { //确认新增
		// popUpShow.addPopup = false
		console.log(addForm)
		data.addTc=true
		let ist=true
		for(let i in addForm){
			if(addForm[i].length==0 || addForm[i]==null){
				console.log(i)
				ElMessage.error(i+"字段不能为空！")
				ist=false
				data.addTc=false
				break;
			}
		}
		if(ist){
			ajax.post('/wsc/save',{
				body:addForm
			},res=>{
				console.log(res)
				if(res.code==200){
					ElMessage({
						message: '添加成功！',
						type: 'success',
					})
					selectAll()
					clearObj(addForm)
					data.addTc=false
					popUpShow.addPopup=false
				}else{
					data.addTc=false
					ElMessage.error(res.msg)
				}
			},err=>{
				data.addTc=false
				ElMessage.error(res.msg)
			})
		}
	}
	function clearObj(obj){
		for(let i in obj){
			obj[i]=''
		}
	}
	function selectAll() {
		data.zt=true
		ajax.post('/wsc/jsp', {
			body: {
				"page": pageInf.gd.page,
				"size": pageInf.gd.pagesize,
				"fName":data.name
			}
		}, res => {
			console.log(res)
			if (res.code == 200) {
				if(res.data.totalCount==0){
					ElMessage({
						message: '数据库数据为空！',
						type: 'error',
					})
				}else{
					data.gd = res.data.list
					pageInf.gd.sumPage=res.data.totalCount
					data.zt=false
					data.name=''
					ElMessage({
						message: '查询成功！',
						type: 'success',
					})
				}
			} else {
				ElMessage.error(res.msg)
			}
		},err=>{
			ElMessage.error("网络连接失败！")
		})
	}
</script>

<style lang="less" scoped>
	@import url("./Works.less");
</style>
